<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Document</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/YBslider.css" />
		<link rel="stylesheet" href="css/kzt.css" />
		<link rel="stylesheet" href="css/jquery.nstSlider.css">
		<script type="text/javascript" src="js/laydate.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/YBslider.js"></script>
		<script type="text/javascript" src="js/page.js"></script>
		<script type="text/javascript" src="js/linkjs.js"></script>
	</head>

	<body style="min-height:900px">

		<div class="header">
			<div id="append"></div>
			<script>
				$("#append").load("header.html");
			</script>

			<div class="navBigbox">
				<div class="navsubBox">
					<ul class="indexMenu">
						<li class="home-btn">首页</li>
						<li class="cp-btn">产品
							<a class="checked-arrow"></a>
						</li>
						<li class="kf-btn">开发</li>
						<li class="kzt-btn">控制台</li>
						<li class="Qos-btn">帮助与支持</li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<!--  -->
		<div class="contentBox">
			<h3>
			首页产品 &gt;<a style="color:#50b9e7">&nbsp;控制台</a>
		</h3>
			<ul class="order-flowUl">
				<li class="tyll-btn">LET统付流量</li>
			</ul>
			<div class="clear"></div>
			<!--  -->
			<div class="order-flow-content tyll-Box" style="position:relative;float:left;width:1160px;z-index:2;top:-1px;">
				<div class="sliderBigBox">
					<div class="container">
						<div class="ovflowDiv">
							<span class="llname">使用场景：</span>
							<form action="">
								<input type="radio" name="sycj" id="" value="" /><label for="">全流量统付</label>
								<input type="radio" name="sycj" id="" value="" /><label for="">指定VIP用户流量统付</label>
								<input type="radio" name="sycj" id="" value="" /><label for="">指定计费策略</label>
							</form>
						</div>
						<div class="ovflowDiv" style="overflow: initial;">
							<span class="llname">cdn加速方式：</span>
							<form action="">
								<input type="radio" name="cdn" id="" value="" /><label for="">标签</label>
								<input type="radio" name="cdn" id="" value="" /><label for="">IP</label>
								<div class="slider2Tips">
									<i></i>
									<div class="tipsBox">
										<p>说明：</p>
										<p>标签方式是您的cdn加速服务器的形式是通过代理商代理运行的。</p>
										<p>IP方式是您的cdn加速服务器的形式是自己服务器运行的。</p>
										<div>请联系开发人员确认此选项。</div>
									</div>
								</div>
							</form>
						</div>
						<div class="inputbox2 ovflowDiv"  style="padding-left: 0;">

							<p class="llname">产品使用时间：</p>

							<input type="text"  class="laydate-icon" placeholder="YYYY-MM-DD" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
<span>-</span>
							<input type="text"  class="laydate-icon" placeholder="YYYY-MM-DD" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">

						</div>

						<section class="content">
							<div class="box">
								<p class="llname">
									选择金额：
								</p>
								<div class="example">
									<div class="slider-wrapper">
										<div class="nstSlider nstSlider1" data-range_min="0" data-range_max="300" data-cur_min="0" data-cur_max="0">
											<div class="bar bar0"></div>
											<div class="leftGrip leftGrip0"></div>
										</div>
										<div class="math">
											<input type="text" class="js-callback_1" onblur="fnOnblurMoney(this)" />
											<label class="display-box-label">万</label>
										</div>
										<!--<div class="leftLabel" />
	        <div class="rightLabel" />-->
										<p class="nst-p">
											<span class="nst-span nst-span1">
	                <em class="icon_circular"></em>
	                <a>5W</a>
	            </span>
											<span class="nst-span nst-span2">
	                <em class="icon_circular"></em>
	                <a>50W</a>
	            </span>
											<span class="nst-span nst-span3">
	                <em class="icon_circular"></em>
	                <a>100W</a>
	            </span>
											<span class="nst-span nst-span4">
	                <em class="icon_circular"></em>
	                <a>200W</a>
	            </span>
											<span class="nst-span nst-span5">
	                <em class="icon_circular"></em>
	                <a>300W</a>
	            </span>
										</p>
									</div>
								</div>
						</section>

						<section class="content">
							<div class="box">
								<p class="llname">
									统付流量：
								</p>
								<div class="example">
									<div class="slider-wrapper">
										<div class="nstSlider nstSlider2" data-range_min="0" data-range_max="600" data-cur_min="0" data-cur_max="0">
											<div class="bar bar1"></div>
											<div class="leftGrip leftGrip1"></div>
										</div>
										<div class="math">
											<input type="text" class="js-callback_2" onblur="fnOnblurLocal(this)" />
											<label class="display-box-label">TB</label>
										</div>
										<!--<div class="leftLabel" />
	        <div class="rightLabel" />-->
										<p class="nst-p">
											<span class="nst-span nst-span1">
	                <em class="icon_circular"></em>
	                <a>10TB</a>
	            </span>
											<span class="nst-span nst-span2">
	                <em class="icon_circular"></em>
	                <a>105TB</a>
	            </span>
											<span class="nst-span nst-span3">
	                <em class="icon_circular"></em>
	                <a>200TB</a>
	            </span>
											<span class="nst-span nst-span4">
	                <em class="icon_circular"></em>
	                <a>400TB</a>
	            </span>
											<span class="nst-span nst-span5">
	                <em class="icon_circular"></em>
	                <a>600TB</a>
	            </span>
										</p>
									</div>
								</div>
						</section>

						</div>
						
						<div class="clear"></div>
						</div>
						<!--滑块 -->
						<div class="sliderRightBox">
							<h3>当前选择</h3>
							<ul style="overflow:hidden">
								<li><span>业务场景：</span>
									<a>全流量统付</a>
								</li>
								<li><span>cdn加速方式：</span>
									<a>标签</a>
								</li>
								<li><span>开始时间：</span>
									<a>2016-11-09 24:00:00</a>
								</li>
								<li><span>结束时间：</span>
									<a>2016-11-09 24:00:00</a>
								</li>
							</ul>

							<p>合约金额：</p>
							<span class="Flow-money">￥25,000</span>
							<button class="slider2DgyxBtn">提交订购意向</button>
							<h6>计算规则详情&gt;&gt;</h6>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
					<!-- 通用流量 -->
				</div>
			</div>
		</div>

		</div>
		<div class="clear"></div>

		<!--  -->
		<div id="append-bot"></div>
		<script>
			$("#append-bot").load("footer.html");
		</script>
		<script src="js/jquery.nstSlider.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(".slider2Tips i").hover(
				function(){
					$(this).siblings().show()
				},
				function(){
					$(this).siblings().hide()
				}
			)
			//金额初始化
			$('.nstSlider1').nstSlider({
				"crossable_handles": false,
				"left_grip_selector": ".leftGrip",
				"right_grip_selector": undefined,
				"value_bar_selector": ".bar",
				"value_changed_callback": function(cause, leftValue) {
					$('.js-callback_1').val(leftValue);
					$('.js-callback_2').val(leftValue * 2);
					$('.js-callback_3').val(leftValue * 3);
				},
				"user_mouseup_callback": function(vmin, vmax, left_grip_moved) {
					var a = $('.leftGrip0').css('left');
					var b = parseInt(a) + 18;
					$('.bar').css('width', b);
					$('.leftGrip').css('left', a);
				}
			});
			//本地流量初始化
			$('.nstSlider2').nstSlider({
				"crossable_handles": false,
				"left_grip_selector": ".leftGrip",
				"right_grip_selector": undefined,
				"value_bar_selector": ".bar",
				"value_changed_callback": function(cause, leftValue) {
					$('.js-callback_2').val(leftValue);
					$('.js-callback_1').val(leftValue / 2);
				},
				"user_mouseup_callback": function(vmin, vmax, left_grip_moved) {
					var a = $('.leftGrip1').css('left');
					var b = parseInt(a) + 36;
					$('.bar0').css('width', b);
					$('.leftGrip0').css('left', a);
					$('.bar2').css('width', 0);
					$('.leftGrip2').css('left', 0);
					$('.js-callback_3').val(0);
				}
			});
			//全国流量初始化
			$('.nstSlider3').nstSlider({
				"crossable_handles": false,
				"left_grip_selector": ".leftGrip",
				"right_grip_selector": undefined,
				"value_bar_selector": ".bar",
				"value_changed_callback": function(cause, leftValue) {
					$('.js-callback_3').val(leftValue);
					$('.js-callback_1').val(leftValue / 3);
				},
				"user_mouseup_callback": function() {
					var a = $('.leftGrip2').css('left');
					var b = parseInt(a) + 36;
					$('.bar0').css('width', b);
					$('.leftGrip0').css('left', a);
					$('.bar1').css('width', 0);
					$('.leftGrip1').css('left', 0);
					$('.js-callback_2').val(0);
				}
			});

			//金额输入框失去焦点函数
			function fnOnblurMoney(money) {
				var mon = $('.js-callback_1').val();
				if(mon > 0) {
					var a = mon / 300;
					var b = a * 444;
					var c = b + 18;
					var d = mon * 2;
					var e = mon * 3;
					if(mon <= 300) {
						$('.bar').css('width', c);
						$('.leftGrip').css('left', b);
						$('.js-callback_2').val(d);
						$('.js-callback_3').val(e);
					}
				}
			}
			//本地流量输入框失去焦点函数
			function fnOnblurLocal(money) {
				var mon = $('.js-callback_2').val();
				if(mon > 0) {
					var a = mon / 600;
					var b = a * 444;
					var c = b + 18;
					var d = mon / 2;
					if(mon <= 600) {
						$('.bar0').css('width', c);
						$('.leftGrip0').css('left', b);
						$('.bar1').css('width', c);
						$('.leftGrip1').css('left', b);
						$('.bar2').css('width', 0);
						$('.leftGrip2').css('left', 0);
						$('.js-callback_1').val(d);
						$('.js-callback_3').val(0);
					}
				}
			}
			//全国流量输入框失去焦点函数
			function fnOnblurCountry(money) {
				var mon = $('.js-callback_3').val();
				if(mon > 0) {
					var a = mon / 900;
					var b = a * 444;
					var c = b + 18;
					var d = mon / 3;
					if(mon <= 900) {
						$('.bar0').css('width', c);
						$('.leftGrip0').css('left', b);
						$('.bar1').css('width', 0);
						$('.leftGrip1').css('left', 0);
						$('.bar2').css('width', c);
						$('.leftGrip2').css('left', b);
						$('.js-callback_1').val(d);
						$('.js-callback_2').val(0);
					}
				}
			}
		</script>
	</body>

</html>